<template>
  <div>
    <div id="summernote">{{richContent}}</div>
  </div>
</template>

<script>
// import $ from 'jquery'
import { uploadImg } from '@/api/app'
/* eslint-disable */
export default {
  name: 'summernote',
  components: {},
  props: ['noteContent'],
  data () {
    return {
      isHas: false,
      richContent: ''
    }
  },
  computed: {},
  created () {},
  mounted () {
    this.richContent = this.noteContent
    const _this = this
    !this.isHas && $('#summernote').summernote({
      lang: 'ko-KR',
      placeholder: '',
      height: 500,
      htmlMode: true,
      toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['fontname', ['fontname']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['insert', ['link', 'picture', 'video']],
        //['mybutton', ['myVideo']],
        ['table', ['table']],
        ['height', ['height']],
        ['view', ['fullscreen', 'codeview']],
      ],
      // buttons: {
      //   myVideo: function(context) {
      //     var ui = $.summernote.ui;
      //     var button = ui.button({
      //       contents: '<i class="fa fa-video-camera"/>',
      //       tooltip: 'video',
      //       click: function() {
      //         var div = document.createElement('div');
      //         div.classList.add('embed-container');
      //         var iframe = document.createElement('iframe');
      //         iframe.src = prompt('영상 링크를 입력해주세요.:');
      //         iframe.setAttribute('frameborder', 0);
      //         iframe.setAttribute('width', '100%');
      //         iframe.setAttribute('allowfullscreen', true);
      //         div.appendChild(iframe);
      //         context.invoke('editor.insertNode', div);
      //       }
      //     });
      //     return button.render();
      //   }
      // },
      fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
      fontNames: [
        'Noto Sans KR','Nanum Gothic',"Nanum Myeongjo","Helvetica", "Arial","Helvetica Neue",'sans-serif'
      ],
      fontNamesIgnoreCheck: ['Noto Sans KR','Nanum Gothic',"Nanum Myeongjo"],
      callbacks: {
        onInit: function () {
          _this.isHas = true
          $('#summernote').summernote('code', _this.richContent)
          $('#summernote').summernote('fontName', 'Noto Sans KR')
        },
        onImageUpload: function (files) {
          if (files && files[0]) {
            const size = Math.floor(files[0].size / 1024)
            if (size > 3 * 1024) {
              _this.$alert('3MB이하의 이미지를 첨부해주세요.', '알림', {
                confirmButtonText: '확인'
              })
              return false
            }
            _this.uploadImg(files[0])
          }
        }
      }
    }).summernote('lineHeight', 1.2);
  },
  methods: {
    async uploadImg (file) {
      try {
        let formDate = new FormData()
        formDate.set('file', file)
        formDate.set('type', 0)
        uploadImg(formDate).then(res => {
          console.log(res)
          if (res.url) {
            $('#summernote').summernote('insertImage', res.url)
          } else {
            this.$alert('이미지 첨부 실패하였습니다. ', '힌트', {
              confirmButtonText: '확인'
            })
          }
        })
      } catch (error) {
        this.$alert('이미지 첨부 실패하였습니다. ', '힌트', {
          confirmButtonText: '확인'
        })
      }
    }
  },
  watch: {
    noteContent: {
      handler (val) {
        $('#summernote').summernote('code', val)
      }
    }
  },
  destroyed () {
    this.isHas = false
    $('#summernote').summernote('destroy')
  }
}
</script>
<style lang="scss">
.note-editing-area {
  background: #fff;
}
</style>
